<template>
    <div class="play-tabar" v-if="songList.length !==0">
        <div class="img-box spin" :class="animation_play" @click="set_menuStatus(true)">
            <img :src="currentSong.picUrl" :alt="currentSong.name" />
        </div>

        <div class="text-container">
            <div class="name">{{currentSong.name}}</div>
            <div class="singer">{{currentSong.singer}}</div>
        </div>

        <div class="play" @click="selectPlay">
            <i class="iconfont" :class="palyStatus ? 'icon-zantingtingzhi' : 'icon-bofang'"></i>
        </div>

        <div class="menu" @click="playListDisplay">
            <i class="iconfont icon-caidan"></i>
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations } from "@/store/helper/play";
export default {
    name: "play-tabar",
    data() {
        return {};
    },
    computed: {
        ...mapState({
            palyStatus: (state) => state.palyStatus,
            songList: (state) => state.songList,
            currentSong: (state) => state.currentSong,
        }),
        animation_play() {
            return !this.palyStatus ? "animation-play-paused" : "";
        },
    },
    methods: {
        ...mapMutations([
            "set_menuStatus",
            "set_playListDisplay",
            "set_palyStatus",
        ]),
        playListDisplay() {
            this.set_playListDisplay(true);
        },
        // 播放按钮
        selectPlay() {
            this.set_palyStatus(!this.palyStatus);
        },
    },
};
</script>
<style lang="less" scoped>
.play-tabar {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 50px;
    border-top: 1px solid #e4e0e0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #fff;
    .img-box {
        flex: 0 0 35px;
        border-radius: 50%;
        overflow: hidden;
        height: 35px;
        img {
            display: block;
        }
    }
    .text-container {
        flex: 1;
        padding-left: 5px;
        .name {
            font-size: 14px;
        }
        .singer {
            font-size: 12px;
        }
    }
    .menu {
        flex: 0 0 30px;
        margin-left: 15px;
        .iconfont {
            font-size: 30px;
        }
    }
    .play {
        flex: 0 0 30px;
        .iconfont {
            font-size: 30px;
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .spin {
        animation: spin 15s linear 0s infinite;
    }
    .animation-play-paused {
        animation-play-state: paused;
        -webkit-animation-play-state: paused; /* Safari 和 Chrome */
    }
}
</style>